<template>
  <div>
      <Row style="background:#fff;padding:10px;">
          <Button icon="android-add" class="ivu-btn-default" @click="addResources('增加')">增加</Button>
          <Button icon="android-remove" class="ivu-btn-default">删除</Button>
          <Button icon="android-refresh" class="ivu-btn-default" @click="refresh">刷新</Button>
      </Row>
      <Tabs value="name1" style="background:#fff;padding-bottom:10px;" @on-click="tab">
          <TabPane label="菜单" name="name1">
              <!-- <Row style="padding-left:20px;margin-bottom:20px;">
                <Checkbox v-model="single1" @on-change="checkGroup('名称',single1)">名称</Checkbox>
                <Checkbox v-model="single2" @on-change="checkGroup('图标样式名',single2)">图标样式名</Checkbox>
                <Checkbox v-model="single3" @on-change="checkGroup('链接地址',single3)">链接地址</Checkbox>
                <Checkbox v-model="single4" @on-change="checkGroup('状态',single4)">状态</Checkbox>
                <Checkbox v-model="single5" @on-change="checkGroup('操作',single5)">操作</Checkbox>
              </Row> -->

              <Table :columns="columns7" :data="data6"></Table>
          </TabPane>
          <TabPane label="按钮" name="name2">
                <Table :columns="columns1" :data="data1"></Table>
                <Page :total="numberOfElements" :page-size="size" style="text-align:center;margin-top:30px;" @on-change="tabPage"></Page>
          </TabPane>
      </Tabs>
        <Modal :draggable="true"
            v-model="modal1"
            :title="addTit"
            :mask-closable="false">
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
                    <FormItem label="名称" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入名称"></Input>
                    </FormItem>
                    <FormItem label="类型" prop="type">
                        <Select v-model="formValidate.type" placeholder="请选择类型">
                            <Option value="MENU">菜单</Option>
                            <Option value="BUTTON">按钮</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="图标样式" v-if="formValidate.type === 'MENU'">
                        <Select v-model="formValidate.icon" placeholder="请选择图标样式">
                            <Option :value="item.value" v-for="(item,index) in iconList" :key="index">
                                <Icon :type="item.value" style="margin-right:20px;"></Icon>
                                {{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="链接" prop="link">
                        <Input v-model="formValidate.link" placeholder="请输入链接"></Input>
                    </FormItem>
                    <FormItem label="排序">
                        <Input-number :min="0" :step="1" v-model="formValidate.sort" placeholder="请输入排序"></Input-number>
                    </FormItem>
                    
                    <FormItem label="状态" prop="isActive">
                        <Select v-model="formValidate.isActive" placeholder="请选择状态">
                            <Option value="true">启用</Option>
                            <Option value="false">禁用</Option>
                        </Select>
                    </FormItem>
                </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            </div>
        </Modal>
        <Modal :draggable="true"
            v-model="modal2"
            title="修改权限"
            :mask-closable="false">
            <Form ref="formValidate2" :model="formValidate2" :rules="ruleValidate2" :label-width="80">
                    <FormItem label="名称" prop="name">
                        <Input v-model="formValidate2.name" placeholder="请输入名称"></Input>
                    </FormItem>
                    <FormItem label="类型" prop="type">
                        <Select v-model="formValidate2.type" placeholder="请选择类型" disabled >
                            <Option value="MENU">菜单</Option>
                            <Option value="BUTTON">按钮</Option>
                        </Select>
                    </FormItem>
                    <FormItem label="图标样式" v-if="formValidate2.type === 'MENU'">
                        <Select v-model="formValidate2.icon" placeholder="请选择图标样式">
                            <Option :value="item.value" v-for="(item,index) in iconList" :key="index">
                                <Icon :type="item.value" style="margin-right:20px;"></Icon>
                                {{ item.label }}
                            </Option>
                        </Select>
                    </FormItem>
                    <FormItem label="排序">
                        <Input-number :min="1" :step="1" v-model="formValidate2.sort" placeholder="请输入排序"></Input-number>
                    </FormItem>
                    
                    <FormItem label="状态" prop="isActive">
                        <Select v-model="formValidate2.isActive" placeholder="请选择状态">
                            <Option value="true">启用</Option>
                            <Option value="false">禁用</Option>
                        </Select>
                    </FormItem>
                </Form>
            <div slot="footer">
                <Button type="primary" @click="handleSubmit2('formValidate2')">提交</Button>
            </div>
        </Modal>
  </div>
</template>

<script>
  import expandRow from './table-expand.vue';
  export default {
      name: 'Resources',
      components: { expandRow },
      data () {
          return {
              modal1: false,
              modal2: false,
              single1: true,
              single2: true,
              single3: true,
              single4: true,
              single5: true,
              addType: '',
              addTit: '增加权限',
              dataList: {},
              numberOfElements: 10,
              size: 10,
              iconList: [
                  {
                      label: 'android-people',
                      value: 'android-people'
                  },
                  {
                      label: 'android-settings',
                      value: 'android-settings'
                  },
                  {
                      label: 'android-contact',
                      value: 'android-contact'
                  },
                  {
                      label: 'android-mail',
                      value: 'android-mail'
                  },
                  {
                      label: 'android-send',
                      value: 'android-send'
                  },
                  {
                      label: 'android-delete',
                      value: 'android-delete'
                  },
                  {
                      label: 'android-globe',
                      value: 'android-globe'
                  },
                  {
                      label: 'android-chat',
                      value: 'android-chat'
                  },
                  {
                      label: 'android-desktop',
                      value: 'android-desktop'
                  },
                  {
                      label: 'android-cloud-outline',
                      value: 'android-cloud-outline'
                  },
                  {
                      label: 'android-cloud',
                      value: 'android-cloud'
                  },
                  {
                      label: 'android-download',
                      value: 'android-download'
                  },
                  {
                      label: 'android-upload',
                      value: 'android-upload'
                  },
                  {
                      label: 'android-image',
                      value: 'android-image'
                  },
                  {
                      label: 'android-microphone',
                      value: 'android-microphone'
                  },
                  {
                      label: 'android-favorite',
                      value: 'android-favorite'
                  },
                  {
                      label: 'android-cart',
                      value: 'android-cart'
                  },
                  {
                      label: 'ionic',
                      value: 'ionic'
                  }
              ],
              formValidate: {
                  name: '',
                  type: 'MENU',
                  link: '',
                  sort: 1,
                  isActive: '',
                  icon: ''
              },
              ruleValidate: {
                  name: [
                      { required: true, message: '名称不能为空', trigger: 'blur' }
                  ],
                  link: [
                      { required: true, message: '链接不能为空', trigger: 'blur' }
                  ],
                  type: [
                      { required: true, message: '请选择类型', trigger: 'change' }
                  ],
                  isActive: [
                      { required: true, message: '请选择状态', trigger: 'change' }
                  ]
              },
              formValidate2: {
                  name: '',
                  type: 'BUTTON',
                  sort: 1,
                  isActive: '',
                  icon: ''
              },
              ruleValidate2: {
                  name: [
                      { required: true, message: '名称不能为空', trigger: 'blur' }
                  ],
                  type: [
                      { required: true, message: '请选择类型', trigger: 'change' }
                  ],
                  isActive: [
                      { required: true, message: '请选择状态', trigger: 'change' }
                  ]
              },
              columns7: [

                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.formValidate.parentId = params.row.id;
                                          this.modal1 = true;
                                          this.addResources('增加');
                                      }
                                  }
                              }, '增加子菜单'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          depot.get({
                                              url: 'user/resource/findById?id=' + params.row.id,
                                              cb: (data) => {
                                                  if (data.code === 0) {
                                                      this.addResources('编辑', data.data);
                                                  } else {
                                                      this.$Message.error(data.message);
                                                  }
                                              }
                                          });
                                      }
                                  }
                              }, '编辑'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          console.log(ids);
                                          depot.post({
                                              url: 'user/resource/deleteResource',
                                              data: ids,
                                              cb: (data) => {
                                                  if (data.code === 0) {
                                                      this.$Message.success('删除成功');
                                                      location.reload();
                                                  } else {
                                                      this.$Message.error(data.message);
                                                  }
                                              }
                                          });
                                      }
                                  }
                              }, '删除')
                          ]);
                      }
                  },
                  {
                      type: 'expand',
                      width: 50,
                      render: (h, params) => {
                          return h(expandRow, {
                              props: {
                                  row: params.row
                              }
                          });
                      }
                  },
                  {
                      title: '名称',
                      align: 'left',
                      key: 'name',
                      width: 200
                  },
                  {
                      title: '图标样式名',
                      key: 'icon',
                      width: 300,
                      render: (h, params) => {
                          return h('div', [
                              h('Icon', {
                                  props: {
                                      type: params.row.icon
                                  }
                              }),
                              h('strong', params.row.icon)
                          ]);
                      }
                  },
                  {
                      title: '链接地址',
                      align: 'center',
                      width: 300,
                      key: 'link'
                  },
                  {
                      title: '状态',
                      align: 'center',
                      width: 300,
                      key: 'isActive'
                  }
              ],
              columns8: [

                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          params.row.id;
                                          this.modal2 = true;
                                      }
                                  }
                              }, '编辑'),
                              h('Button', {
                                  props: {
                                      type: 'error',
                                      size: 'small'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                      }
                                  }
                              }, '删除')
                          ]);
                      }
                  },
                  {
                      type: 'expand',
                      width: 50,
                      render: (h, params) => {
                          return h(expandRow, {
                              props: {
                                  row: params.row
                              }
                          });
                      }
                  },
                  {
                      title: '名称',
                      align: 'left',
                      key: 'name',
                      width: 200
                  },
                  {
                      title: '图标样式名',
                      key: 'icon',
                      width: 300,
                      render: (h, params) => {
                          return h('div', [
                              h('Icon', {
                                  props: {
                                      type: params.row.icon
                                  }
                              }),
                              h('strong', params.row.icon)
                          ]);
                      }
                  },
                  {
                      title: '链接地址',
                      align: 'center',
                      width: 300,
                      key: 'link'
                  },
                  {
                      title: '状态',
                      align: 'center',
                      width: 300,
                      key: 'isActive'
                  },
                  {
                      title: '操作',
                      key: 'action',
                      align: 'center',
                      render: (h, params) => {
                          return h('div', [
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          this.formValidate.parentId = params.row.id;
                                          this.modal1 = true;
                                          this.addResources('增加');
                                      }
                                  }
                              }, '增加子菜单'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          depot.get({
                                              url: 'user/resource/findById?id=' + params.row.id,
                                              cb: (data) => {
                                                  if (data.code === 0) {
                                                      this.addResources('编辑', data.data);
                                                  } else {
                                                      this.$Message.error(data.message);
                                                  }
                                              }
                                          });
                                      }
                                  }
                              }, '编辑'),
                              h('Button', {
                                  props: {
                                      type: 'primary',
                                      size: 'small'
                                  },
                                  style: {
                                      marginRight: '5px'
                                  },
                                  on: {
                                      click: () => {
                                          let ids = [params.row.id];
                                          console.log(ids);
                                          depot.post({
                                              url: 'user/resource/deleteResource',
                                              data: ids,
                                              cb: (data) => {
                                                  if (data.code === 0) {
                                                      this.$Message.success('删除成功');
                                                      location.reload();
                                                  } else {
                                                      this.$Message.error(data.message);
                                                  }
                                              }
                                          });
                                      }
                                  }
                              }, '删除')
                          ]);
                      }
                  }
              ],
              data6: [],
              columns1: [
                  {
                      type: 'selection',
                      width: 60,
                      align: 'center'
                  },
                  {
                      title: '名称',
                      key: 'name'
                  },
                  {
                      title: '排序',
                      key: 'id'
                  },
                  {
                      title: '状态',
                      key: 'isActive'
                  }
              ],
              data1: []
          };
      },
      mounted () {
          this.init();
      },
      methods: {
          tab (name) {
              if (name === 'name2') {
                  this.tabPage(1);
              }
          },
          tabPage (val) {
              let page = val - 1;
              depot.get({
                  url: 'user/resource/findBtnByPage?type=BUTTON&page=' + page + '&size=10',
                  cb: (data) => {
                      if (data.code === 0) {
                          this.data1.splice(0, this.data1.length);
                          data.data.content.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.name;
                              obj.isActive = item.isActive === true ? '启用' : '禁用';
                              this.data1.push(obj);
                          });
                          this.numberOfElements = data.data.numberOfElements;
                          this.size = data.data.size;
                      } else {
                          this.$Message.error(data.message);
                      }
                  }
  
              });
          },
          init () {
              depot.get({
                  url: 'user/resource/findBindMenus?type=MENU&roleId=',
                  cb: (data) => {
                      if (data.code === 0) {
                          this.data6.splice(0, this.data6.length);
                          data.data.forEach((item, index) => {
                              let obj = {};
                              obj.id = item.id;
                              obj.name = item.name;
                              obj.link = item.link;
                              obj.icon = item.icon;
                              obj.isActive = item.isActive === true ? '启用' : '禁用';
                              obj.list = [];
                              item.children.forEach((item2, index2) => {
                                  let obj2 = {};
                                  obj2.id = item2.id;
                                  obj2.name = item2.name;
                                  obj2.link = item2.link;
                                  obj2.icon = item2.icon;
                                  obj2.isActive = item2.isActive === true ? '启用' : '禁用';
                                  obj.list.push(obj2);
                              });
                              this.data6.push(obj);
                          });
                      } else if (data.code === 999) {
                          this.$Messages.error(data.message);
                      }
                  }
              });
          },
          checkGroup (val, type) {
              if (val === '名称') {
                  if (type === false) {
                      this.columns7.forEach((item, index) => {
                          if (item.title === '名称') {
                              this.columns7.splice(index, index);
                          }
                      });
                  } else {
                      let obj = {};
                      obj.title = '名称';
                      obj.align = 'left';
                      obj.key = 'name';
                      this.columns7.splice(1, 0, obj);
                  }
              }

              if (val === '图标样式名') {
                  if (type === false) {
                      this.columns7.forEach((item2, index2) => {
                          if (item2.title === '图标样式名') {
                              this.columns7.splice(2, 1);
                          }
                      });
                  } else {
                      let obj = {};
                      obj.title = '图标样式名';
                      obj.key = 'icon';
                      this.columns7.splice(2, 0, obj);
                      this.columns7[2] = this.columns8[2];
                  }
              }

              if (val === '链接地址') {
                  if (type === false) {
                      this.columns7.forEach((item, index) => {
                          if (item.title === '链接地址') {
                              this.columns7.splice(3, 1);
                          }
                      });
                  } else {
                      let obj = {};
                      obj.title = '链接地址';
                      obj.align = 'center';
                      obj.key = 'link';
                      this.columns7.splice(3, 0, obj);
                  }
              }

              if (val === '状态') {
                  if (type === false) {
                      this.columns7.forEach((item, index) => {
                          if (item.title === '状态') {
                              this.columns7.splice(4, 1);
                          }
                      });
                  } else {
                      let obj = {};
                      obj.title = '状态';
                      obj.align = 'center';
                      obj.key = 'isActive';
                      this.columns7.splice(4, 0, obj);
                  }
              }

              if (val === '操作') {
                  if (type === false) {
                      this.columns7.forEach((item, index) => {
                          if (item.title === '操作') {
                              this.columns7.splice(5, 1);
                          }
                      });
                  } else {
                      let obj = {};
                      obj.title = '操作';
                      this.columns7.splice(5, 0, obj);
                      this.columns7[5] = this.columns8[5];
                  }
              }
          },
          // 增加
          addResources (type, item) {
              if (type === '增加') {
                  this.addType = '增加';
                  this.addTit = '增加权限';
                  this.formValidate.name = '';
                  this.formValidate.link = '';
                  this.formValidate.sort = 1;
                  this.formValidate.isActive = '';
                  this.formValidate.icon = '';
              } else {
                  this.addType = '编辑';
                  this.addTit = '编辑权限';
                  this.dataList = item;
                  this.formValidate.parentId = item.id;
                  this.formValidate.name = item.name;
                  this.formValidate.link = item.link;
                  this.formValidate.sort = item.sort;
                  this.formValidate.isActive = item.isActive === true ? 'true' : 'false';
                  this.formValidate.icon = item.icon;
              }
              this.modal1 = true;
          },
          // 确认增加
          handleSubmit (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
                      console.log(this.addType);
                      if (this.addType === '增加') {
                          if (this.formValidate.icon !== '') {
                              if (this.formValidate.type === 'MENU') {
                                  depot.post({
                                      url: 'user/resource/saveResource',
                                      data: this.formValidate,
                                      cb: (data) => {
                                          if (data.code === 0) {
                                              this.$Message.success('增加成功');
                                              location.reload();
                                          } else {
                                              this.$Message.error(data.message);
                                          }
                                      }
                                  });
                              } else {
                                  this.$Message.error('按钮功能没做');
                              }
                          } else {
                              this.$Message.error('请选择图标样式');
                          }
                      } else {
                          if (this.formValidate.icon !== '') {
                              if (this.formValidate.type === 'MENU') {
                                  this.dataList.name = this.formValidate.name;
                                  this.dataList.link = this.formValidate.link;
                                  this.dataList.sort = this.formValidate.sort;
                                  this.dataList.isActive = this.formValidate.isActive;
                                  this.dataList.icon = this.formValidate.icon;
                                  depot.post({
                                      url: 'user/resource/updateResource',
                                      data: this.dataList,
                                      cb: (data) => {
                                          if (data.code === 0) {
                                              this.$Message.success('编辑成功');
                                              location.reload();
                                          } else {
                                              this.$Message.error(data.message);
                                          }
                                      }
                                  });
                              } else {
                                  this.$Message.error('按钮功能没做');
                              }
                          } else {
                              this.$Message.error('请选择图标样式');
                          }
                      }
                  } else {
                      this.$Message.error('Fail!');
                  }
              });
          },
          // 修改权限
          handleSubmit2 (name) {
              this.$refs[name].validate((valid) => {
                  if (valid) {
  
                  } else {
                      this.$Message.error('提交失败');
                  }
              });
          },
          // 刷新
          refresh () {
              location.reload();
          }
      }
  };
</script>
<style>
    .ivu-table th {
        background-color: #005178;
        color: #fff;
    }
    
</style>
